<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页主题切换器</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: 'Microsoft YaHei', sans-serif;
    }
    .theme-btn {
      display: block;
      width: 100%;
      padding: 8px;
      margin-bottom: 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      text-align: center;
      transition: background-color 0.3s;
    }
    .normal {
      background-color: #f0f0f0;
      color: #333;
    }
    .dark {
      background-color: #333;
      color: #fff;
    }
    .eye-protect {
      background-color: #c9e6cd;
      color: #333;
    }
    h3 {
      margin-top: 0;
      text-align: center;
    }
  </style>
</head>
<body>
  <div style="text-align: center; margin-bottom: 10px;">
    <img src="images/logo.jpg" alt="主题切换器" style="max-width: 80px; height: auto;">
  </div>
  <h3>网页主题切换</h3>
  <button class="theme-btn normal" id="normal-mode">正常模式</button>
  <button class="theme-btn dark" id="dark-mode">暗黑模式</button>
  <button class="theme-btn eye-protect" id="eye-protect-mode">护眼模式</button>
  <button class="theme-btn reset" id="reset-mode" style="background-color: #ff6b6b; color: white; margin-top: 10px;">一键恢复初始主题</button>
  <script src="popup.js"></script>
</body>
</html>